<template>
  <el-select
    :model-value="modelValue"
    placeholder="请选择节点图标"
    @update:modelValue="handleChange"
  >
    <el-option v-for="key in iconNames" :key="key" :label="key" :value="key">
      <div style="display: flex; align-items: center">
        <img
          :src="getIconUrl(key)"
          style="width: 20px; height: 20px; margin-right: 8px"
        />
        <span>{{ key }}</span>
      </div>
    </el-option>
  </el-select>
</template>

<script setup lang="ts">
import { iconNames, getIconUrl } from './topoIcons'

defineProps({
  modelValue: {
    type: String,
    default: '',
  },
})

const emit = defineEmits(['update:modelValue'])

const handleChange = (value: string) => {
  emit('update:modelValue', value)
}
</script>
